@charset "utf-8";
/* CSS Document */
#banner .bx-controls-direction a{background: url(../images/arrow.png) no-repeat; width: 35px; height: 64px;opacity: 0.7;}
#banner .bx-controls-direction a.bx-prev{ left: -80px; }
#banner .bx-controls-direction a:hover.bx-prev,#banner .bx-controls-direction a:hover.bx-next{opacity: 1;}
#banner .bx-controls-direction a.bx-next{background-position: -35px top;right: -80px;}
#banner .bx-wrapper:hover .bx-controls-direction a.bx-prev{left:30px;}
#banner .bx-wrapper:hover .bx-controls-direction a.bx-next{right:30px;}
#banner .bx-wrapper{overflow: hidden;}
#search{ padding: 12px 0;  background: #efefef;}
#search a{color: #404040; padding: 0 8px;}
#search a:hover{ text-decoration: none; color: #009944;}
#search .searchform{background: #fff; width: 100%; padding-right: 40px; border: 1px solid #c4c4c4; border-radius: 5px;overflow: hidden;}
#search .searchform .search-txt{width: 100%; border: none; height: 30px; padding:0 7px;}
#search .searchform .btn-search{position: absolute; right: 16px; border: none; width: 40px; height: 32px; top: 0; border-radius: 0 5px 5px 0; background: #009944; color: #fff; }
#search .searchform .btn-search:hover{color: #fff;  background:#333333; }
@media (max-width: 767px){
#search .searchform{ margin-top: 15px; }
#search .searchform .search-txt{height: 40px;}
#search .searchform .btn-search{height: 42px;}
}
#search .col-md-9{padding-top: 3px;}

#product{ padding:3.6% 0; text-align: center; color: #191919;}
.typename span{display: block; color: #009944; font-weight: bold; margin-bottom: 15px; }
.typename{font-size: 28px; color: #000; text-align: center;  margin-left: auto; margin-right: auto; margin-bottom: 50px; position: relative;}
.typename::after{width: 100px; height: 2px; background: #009944; content: ""; position: absolute; bottom: -25px; left: 50%; margin-left: -50px;}
#product p{margin-bottom: 3.6%; font-size: 16px; line-height: 30px;}
#product .row{margin-left: 0; margin-right: 0;}
#product .row .col-sm-6{padding-left: 0; padding-right: 0;}
#product .hotbox{padding:12px 12px 20px;border: 1px solid #dedede;}

#product .hotbox .title{display: block; background: #009944; color: #fff; font-size: 16px; font-weight: bold; padding:6px 0; margin: 15px 0; text-decoration: none;}
#product .hotbox ul{list-style: none; padding: 0; margin: 0;}
#product .hotbox ul li{text-align: left; line-height: 22px; margin: 10px 0 10px 5px;}
#product .hotbox:hover{background: #efefef;}
#product .hotbox span{color: #009944;}
#product .hotbox .desc{height: 66px;}
@media (min-width: 992px){
#product .hotbox{ border-right: none;}
#product .col-sm-6:last-child .hotbox{border-right:1px solid #dedede; }
}
@media (min-width: 768px) and (max-width: 991px){
#product .col-sm-6:nth-child(even) .hotbox{border-left: none;}
#product .col-sm-6:nth-child(3) .hotbox,#product .col-sm-6:nth-child(4) .hotbox{border-top: none;}
}
@media (max-width: 767px){
#product .hotbox{ border-bottom: none; }
#product .col-sm-6:last-child .hotbox{border-bottom:1px solid #dedede; }
}


#video{background: #efefef; padding:2.8% 0; text-align: center;}
#video .typename{color: #009944; font-size: 24px; font-weight: bold;}
#video .row{margin-left: -8px; margin-right: -8px;}
#video .row .col-sm-6{padding-left: 8px; padding-right: 8px;}
#video .title{color: #000; height: 44px; display: inline-block;}
#video .spimg{display: block; position: relative; margin-bottom: 10px; margin-top: 10px; z-index: 1;}
#video .spimg::before,#video .spimg::after{ content: "";  position: absolute;transition:all 0.4s ease;color: #00a546; opacity: 0; z-index: 99; width: 100%; height: 100%;left: 0;top: 0;}
#video .spimg::before{border: 3px solid; z-index: 2;}
#video .spimg::after{ background: rgba(0,0,0,.5); z-index: auto;}
#video  a:hover.spimg::after,#video a:hover.spimg::before{opacity: 1;}
#video .spimg i{color: #fff; border: 1px solid #fff; border-radius: 5px; padding:3px 15px; position: absolute; bottom: 20px; right: 20px; font-size: 22px; z-index: 2;}
#video .more,#hotklj .more{display: inline-block; background: #009944; color: #fff; width: 180px; line-height: 36px;border-radius: 5px; margin-top: 3.6%;}
#video .more i{font-size: 18px;}
#video a:hover.more,#hotklj a:hover.more{background: #333; text-decoration: none;}

#hotklj{padding:2.8% 0; text-align: center;}
#hotklj .hottit{color: #009944; font-size: 24px; font-weight: bold; margin-bottom: 8px;}
#hotklj i{color: #009944;}
#hotklj .hotdes{border: 1px solid #dedede; display: block; text-decoration: none; margin-top: 30px;}
#hotklj .hotdes p{background: #efefef; color:#009944; margin-bottom: 0; padding:10px;transition:all 0.3s ease; height: 65px; overflow:hidden;}
#hotklj .hotdes p span{font-weight: bold; display: block; font-size: 16px;}
#hotklj a:hover.hotdes p{background:#009944; color: #fff; }
@media (max-width: 767px){
#hotklj,#video{padding: 25px 0;}
}
@media (min-width: 992px){
#why{background: url(../images/why-bg.jpg) center top no-repeat; padding: 3.3% 0;}
}
#why .whycont{background: #fff; padding: 4.2% 5.6%; text-align: center;}
#why .whybox{border: 2px solid #dedede; position: relative; margin-top:15px;}
#why .whybox span{position: absolute; display: inline-block; background: #009944; line-height: 22px; width: 74px; color: #fff; right: -2px; bottom: 20px;}
#why .row{margin-left: -5px; margin-right: -5px;}
#why .row .col-sm-4{padding-left: 5px; padding-right: 5px;}
@media (min-width: 768px) and (max-width: 991px){
	#why .whybox{border: none;}
}
#why .typename{line-height: 35px;}


#project{ background: #efefef; margin-left: auto; margin-right: auto; max-width: 1920px; text-align: center;}
#project .typename{color: #009944; }
#project .typename::before,#project .typename::after{background:  #009944;}
#project .more{width: 100px; line-height: 30px; background: #009944; color: #fff;  display: inline-block; text-decoration: none; border-radius: 5px;}
#project a{color: #000;}
#project a:hover{color: #009944}
#project .pjcont{ position: relative; background:#EFEFEF;  }

@media (min-width: 992px){
	#project{ background: #efefef url(../images/pjbg.jpg) no-repeat;}
	#project .typename{color: #fff; margin-bottom: 20px; margin-top:120px;}
	#project .pjcont{padding: 6.6% 0 4.6% 3.6%;}
	#project .more{ background: #fff; color: #009944; position: absolute; left: -165px; top: 190px; }
	#project a:hover.more{background:#333;}
	#project .typename::before,#project .typename::after{background: #fff;}
}
@media (max-width: 991px){
#project{ padding: 30px 0; }
#project .col-sm-4{margin-bottom: 20px;}
}
@media (min-width: 992px) and (max-width: 1199px){
#project .more{left: -147px;}
}

#project .spimg{ position: relative; display: block; margin-bottom: 10px;}
#project .spimg span{display: block; width: 144px; height: 39px; color: #fff; background: rgba(0,0,0,.6); font-size: 18px; line-height: 38px; text-align: center; position: absolute; left: 50%; top: 50%; margin-left: -72px; margin-top: -16px;}
#project .spimg::before,#project .spimg::after{ content: "";  position: absolute;transition:all 0.4s ease;opacity:0; color: #00a546; z-index: 99; }
#project .spimg::before{border-left: 4px solid;border-top: 4px solid;bottom: 100%;left: 0;right: 100%;top: 0; }
#project .spimg::after {border-bottom: 4px solid;border-right: 4px solid;bottom: 0;left: 100%;right: 0;top: 100%;}
#project a:hover.spimg::after {left: 0;opacity: 1;top: 0;}
#project  a:hover.spimg::before {bottom: 0;opacity: 1;right: 0;}
#project  a:hover.spimg span{background:#00a546; }


#knowledge{padding: 40px 0;text-align: center;}
#knowledge .typename{font-weight: bold; font-size: 24px;}

#knowledge ul{list-style: none; margin: 0; padding: 0;}
#knowledge ul li{padding: 10px 82px 10px 0; border-bottom: 1px dashed #ababab; text-align: left;}
#knowledge ul li span{float: right;   margin-right:-82px;  margin-top: -25px;}
#knowledge ul li a{color: #404040;text-decoration: none;display: block; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
#knowledge ul li a:hover{color:#009944; }
#knowledge .row{background: #efefef; padding: 15px 0 30px; margin-bottom: 15px;}
#knowledge i,#knowledge a.more{color: #009944;}



#links{background: #009944; color: #fffefe; padding: 10px 0;}
#links a{color: #fffefe;}
#links b{float: left;}
#links ul{list-style: none; margin: 0; padding: 0; float: left;}